import React, { useState } from 'react'
import type { FC } from 'react'
import { Button, Space, Switch, Table } from 'antd'
import type { TableColumnsType, TableProps } from 'antd'
import icons from '@/config/icons'
import Myloading from '@/components/Myloading'
import MyBtn from '@/components/MyBtn'

interface IProps {
  data: IAuthType.AuthList[]
}

const columns: TableColumnsType<IAuthType.AuthList> = [
  {
    title: '节点名乐',
    dataIndex: 'name'
  },
  {
    title: '节点标识',
    dataIndex: 'ename'
  },
  {
    title: '是否菜单',
    dataIndex: 'menu',
    render: (value: number) => {
      return value == 0 ? '否' : '是'
    }
  },
  {
    title: '路由地址',
    dataIndex: 'route'
  },
  {
    title: '图标',
    dataIndex: 'icon',
    render: (value: string) => {
      return (icons as any)[value]
    }
  },
  {
    title: '操作',
    render: (_, record) => {
      return (
        <Space>
          <MyBtn
            color="#016418"
            size="small"
            onClick={() => {
              console.log(123)
            }}
          >
            修改
          </MyBtn>
        </Space>
      )
    }
  }
]

const AuthTable: FC<IProps> = ({ data }) => {
  return (
    <>
      {data.length == 0 ? (
        <Myloading />
      ) : (
        <Table
          rowKey={(record) => record.id}
          expandable={{
            expandIcon: () => <div></div>,
            defaultExpandAllRows: true
          }}
          columns={columns}
          dataSource={data}
          pagination={false}
        />
      )}
      {/* <Table
      key={data.length}
      rowKey={(record) => record.id}
      expandable={{
        expandIcon: () => <div></div>,
        defaultExpandAllRows: true
      }}
      columns={columns}
      dataSource={data}
      pagination={false}
    /> */}
    </>
  )
}

export default AuthTable
